<template>
  <el-header style="background-color: lightgray; text-align: right; font-size: 12px;height: 100px;">
    <h1 style="font-size: 30px; text-align: left;">患者录入</h1>
  </el-header>

  <div class="box" style="background-color: white;width: 800px;height: auto;margin: 20px;">
    <div v-for="(check, index) in patientChecks" :key="index" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
      <el-row :gutter="20">
        <el-tag type="primary" style="margin-left: 20px;">当前选择的检查项目是:{{ check.techName }}</el-tag>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content ep-bg-purple"><h3 style="color: black;">编号：{{ check.registerId }}</h3></div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content ep-bg-purple">姓名：{{ check.patientName }}</div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple">创建医生：{{ check.doctorName }}</div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple">检查编码：{{ check.techCode }}</div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple">检查规格：{{ check.techFormat }}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content ep-bg-purple">性别：{{ check.patientGender }} </div></el-col> <!-- 如果有性别数据 -->
        <el-col :span="8"><div class="grid-content ep-bg-purple">费用分类：{{ check.priceType }}</div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple">
          <div class="status">状态</div>
          <div class="status" style="font-size: 30px;color: black;">{{ check.checkState }}</div>
        </div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple">
          <div class="status">检查费用</div>
          <div class="status" style="font-size: 30px;color: black;">￥{{ check.techPrice }}</div>
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content ep-bg-purple">年龄：{{ check.patientAge }}</div></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple">单价：{{ check.techPrice }}</div></el-col>
        <el-col :span="12"><div class="grid-content ep-bg-purple">创建时间：{{ check.creationTime }}</div></el-col>
      </el-row>
          
    <el-button style="margin-left: 20px;" type="primary"  @click="submitCheck(check.medicalTechnologyId,check.patientName)">确认检查</el-button>
    <el-button type="primary">重置医生</el-button>
    </div>

 
  </div>
</template>

<script lang="ts" setup name="CheckIn">
import { useRoute } from 'vue-router';
import router from '@/router';
import axiosInstance from '@/utils/axiosUtils';
import { ref } from 'vue';
import { Check } from '@element-plus/icons';
const route = useRoute();
const registerId = route.query.registerId;

interface PatientCheck {
  registerId: any;
  patientName: string;
  patientAge: string;
  patientGender: string;
  doctorName: string;
  doctorId: any;
  medicalTechnologyId: any;
  techCode: string;
  techName: string;
  techFormat: string;
  techPrice: any;
  priceType: string;
  creationTime: string;
  checkState: string;
}

interface PatientChecks {
  value: PatientCheck[];
}


// 使用 ref 创建响应式数组
const patientChecks = ref<PatientCheck[]>([]); // 直接定义为 PatientCheck[] 类型数组

// 选择患者检查
const selectPatientCheck = async () => {
  try {
    const res = await axiosInstance.get('/api/checkRequest/selectPatientCheck', { params: { registerId } });
    console.log("请求成功:", res.data);
    if (res.data && res.data.length > 0) {
      patientChecks.value = res.data; // 确保实现响应式更新
    } else {
      console.log("没有找到患者信息");
      patientChecks.value = []; // 清空数组以确保数据状态正确
    }
  } catch (error) {
    console.error("请求失败:", error);
  }
};

// 调用选择患者检查方法
selectPatientCheck();
// 提交检查方法
const submitCheck = (medicalTechnologyId: any, patientName: string) => {
  router.push({ name: 'checkNormal', query: { 
    registerId: registerId,
    medicalTechnologyId:medicalTechnologyId,
    patientName: patientName } });
};


</script>

<style lang="css" link-ref="main.css"/>
<style scoped> 
  h1{
    padding-left: 30px;
  }
 .label{
  display: inline-block;
  width: 200px;
  color: grey;
  padding-left: 30px;
 }
 .grid-content{
    margin-left: 20px;
 }
 .el-row:last-child {
    margin-left: 20px;
 }
 .el-col {
  border-radius: 4px;
 }
 .grid-content {
  border-radius: 4px;
  color: grey;
 }
 h3{
  padding-left: 20px;
 }
 .demo-basic {
  text-align: right;
  margin-left: 20px;
 }
 .demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-left: 20px;
 }
 .demo-basic .demo-basic--circle,
 .demo-basic .demo-basic--square {
  display: flex;
  justify-content: flex-end;
  align-items: right;
 }
 .demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
 }
 .demo-basic .block {
  flex: 1;
 }
 .demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
 }
</style>
